<template>
  <div>
    <el-card style="height: 70px;">
      <el-form :inline="true">
        <el-form-item label="用户" style="width: 120px;">
          <el-input placeholder="请输入" v-model="searchOrder.username" @keydown.enter="loadOrder"></el-input>
        </el-form-item>
        <el-form-item label="员工" style="width: 120px;">
          <el-input placeholder="请输入" v-model="searchOrder.empName" @keydown.enter="loadOrder"></el-input>
        </el-form-item>
        <el-form-item label="订单状态" style="width: 180px;">
          <el-select placeholder="请选择" v-model="searchOrder.status" @change="loadOrder">
            <el-option v-for="item in orderStatus" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付状态" style="width: 180px;">
          <el-select placeholder="请选择" v-model="searchOrder.payStatus" @change="loadOrder">
            <el-option label="未支付" value="10"></el-option>
            <el-option label="已支付" value="20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="loadOrder">查询</el-button>
          <el-button type="primary" @click="showDel">显示被删除的订单</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 5px">
      <el-table :data="orderArr">
        <el-table-column type="index" width="80" prop="id" align="center" label="编号"></el-table-column>
        <el-table-column align="center" prop="custName" label="客户"></el-table-column>
        <el-table-column align="center" prop="empName" label="员工"></el-table-column>
        <el-table-column align="center" prop="totalPrice" label="金额"></el-table-column>
        <el-table-column align="center" prop="custAddress" label="客户地址"></el-table-column>
        <el-table-column align="center" prop="payStatus" label="支付状态" :formatter="formatterPayStatus"></el-table-column>
        <el-table-column align="center" prop="status" label="订单状态" :formatter="formatterStatus"></el-table-column>
        <el-table-column align="center" prop="startTime" label="服务开始时间"></el-table-column>
        <el-table-column align="center" prop="endTime" label="服务结束时间"></el-table-column>
        <el-table-column align="center" prop="couponEffect" label="优惠券"></el-table-column>
        <el-table-column align="center" prop="remark" label="备注" ></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="detailOrder(scope.row)">详情</el-button>
            <el-button link type="primary" size="small" @click="updateOrder(scope.row)" v-if="!delDisable">删除</el-button>
            <el-button link type="primary" size="small" @click="deleteOrders(scope.row.id)" v-if="delDisable">从磁盘中删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <el-dialog title="订单详情" v-model="dialogVisible"
               style="width:1000px;padding:40px;" :close-on-click-modal="false">
      <el-form label-width="80px" label-position="top">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="订单号">
              <el-input placeholder="请输入内容" v-model="order.id" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名">
              <el-input placeholder="请输入内容" v-model="order.custName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="员工名">
              <el-input placeholder="请输入内容" v-model="order.empName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单状态">
              <el-select placeholder="请输入内容" v-model="order.status">
                <el-option v-for="item in orderStatus" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="总价">
              <el-input placeholder="请输入内容" v-model="order.totalPrice" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付状态">
              <el-select placeholder="请选择" v-model="order.payStatus" disabled>
                <el-option label="未支付" value="10"></el-option>
                <el-option label="已支付" value="20"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="创建时间">
              <el-date-picker type="datetime" v-model="order.createTime" value-format="YYYY-MM-DD hh:mm:ss" disabled></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务开始时间">
              <el-date-picker type="datetime" v-model="order.startTime" value-format="YYYY-MM-DD hh:mm:ss" disabled></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="备注信息">
              <el-input placeholder="请输入内容" v-model="order.remark" disabledd></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单次序">
              <el-select placeholder="请选择" v-model="order.sort">
                <el-option label="正常" value="1"></el-option>
                <el-option label="紧急" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="优惠券效果">
              <el-input placeholder="请输入内容" v-model="order.couponEffect"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退款金额">
              <el-input placeholder="请输入内容" v-model="order.refundAmount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="客户地址">
              <el-input placeholder="请输入内容" v-model="order.custAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务">
              <el-select placeholder="请输入内容" v-model="order.serviceId">
                <el-option v-for="item in serviceArr" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="editeOrder" type="primary">保存修改</el-button>
        <el-button @click="handleClose">返回</el-button>
      </template>
    </el-dialog>


  </div>

</template>

<script setup>
import axios from "axios";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import router from "@/router";

const orderArr = ref([]);
const searchOrder =ref({custIds:[],empIds:[]})
const order=ref({})

const loadOrder = async () => {
  if (searchOrder.value.username!=null && searchOrder.value.username.trim()){
    await axios.post(BASE_URL+'/v1/customer/select',{username:searchOrder.value.username})
        .then((response)=>{
          if (response.data.code==2000){
            if (response.data.data.length===0){
              orderArr.value=[]
              alert('无此客户')
            }
            for (let data of response.data.data){
              searchOrder.value.custIds.push(data.id)
            }
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
  if (searchOrder.value.empName!=null && searchOrder.value.empName.trim()){
    await axios.post(BASE_URL+'/v1/employee/select',{username:searchOrder.value.empName})
        .then((response)=>{
          if (response.data.code==2000){
            if (response.data.data.length===0){
              orderArr.value=[]
              alert('无此员工')
            }
            for (let data of response.data.data){
              searchOrder.value.empIds.push(data.id)
            }
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
  await axios.post(BASE_URL+'/v1/order/select',searchOrder.value)
      .then((response)=> {
        if(response.data.code===2000) {
          orderArr.value = response.data.data
          orderArr.value=orderArr.value.filter(order=>order.showStatus!='30'
              && order.showStatus!='50'&& order.showStatus!='60'&& order.showStatus!='70')
          searchOrder.value={custIds:[],empIds:[]}
          delDisable.value=false
        console.log(3,orderArr.value)
      }else {
    ElMessage.error(response.data.msg)
  }
})
}
const currentEmp=ref({})
const orderStatus=ref([])
const orderPayStatus=ref([])
const serviceArr=ref([])
onMounted(async ()=>{
  await getEmp(currentEmp).then(()=>{
    if (Object.keys(currentEmp.value).length==0){
      router.push('/empLogin')
    }
  })
  await loadOrder()
  await loadDictOptions(orderStatus,'OrderStatus')
  await loadDictOptions(orderPayStatus,'OrderPayStatus')
  await loadService()
})

const loadService = async () => {
  await axios.post(BASE_URL+'/v1/dsService/select',{})
      .then((response)=>{
        if (response.data.code==2000){
          serviceArr.value=response.data.data
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}

const formatterStatus = (row,column,cellValue,index) => {
  if (!orderStatus.value){
    return cellValue
  }
  if (cellValue==null){
    cellValue='未付款'
    return cellValue
  }
  for (let item of orderStatus.value){
    if (item.value==cellValue){
      cellValue=item.label
      return cellValue
    }
  }
}
const formatterPayStatus = (row,column,cellValue,index) => {
  if (!orderPayStatus.value){
    return cellValue
  }
  for (let item of orderPayStatus.value){
    if (item.value==cellValue){
      cellValue=item.label
      return cellValue
    }
  }
}
const resetSearch =() =>{
  searchOrder.value={custIds:[],empIds:[]};
  loadOrder();
}

const dialogVisible = ref(false);
const detailOrder = (row) => {
  dialogVisible.value = true;
  order.value=row
}

const delDisable=ref(false)
const showDel = () => {
  searchOrder.value={custIds:[],empIds:[]};
  axios.post(BASE_URL+'/v1/order/select',searchOrder.value)
      .then((response)=> {
        if (response.data.code === 2000) {
          orderArr.value = response.data.data
          orderArr.value = orderArr.value.filter(order => order.showStatus == '30'
              || order.showStatus == '50' || order.showStatus == '60' || order.showStatus == '70')
          searchOrder.value = {custIds: [], empIds: []}
          delDisable.value = true
          console.log(3, orderArr.value)
        } else {
          ElMessage.error(response.data.msg)
        }
      })

}
const deleteOrders = (id) => {
  if (confirm("该操作将把订单从磁盘中删除，确认吗")){
    axios.post(BASE_URL+'/v1/order/delete/'+id)
        .then((response)=>{
          if(response.data.code===2000)
          {
            ElMessage.success("删除成功")
            loadOrder()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const editeOrder = async () => {
  if (confirm("确认保存吗")){
    await axios.put(BASE_URL+'/v1/order/updateStatus',{id:order.value.id,empId:order.value.empId,status:order.value.status})
        .then((response)=>{
          if (response.data.code==2000){
            //ElMessage.success("接取成功")
          }else {
            ElMessage.error(response.data.msg)
          }
        })
    await axios.post(BASE_URL+'/v1/order/save',order.value)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("保存成功")
            dialogVisible.value=false
            loadOrder()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const updateOrder = async (row) => {
  if (confirm("确认要删除吗")){
    if (row.showStatus!=null){
      if (row.showStatus=='10'){
        row.showStatus='60'
      }else if (row.showStatus=='20'){
        row.showStatus='50'
      }else if (row.showStatus=='40'){
        row.showStatus='70'
      }
    }else {
      row.showStatus='30'
    }
    //10:用户删除，20:员工删除，30:管理员删除，40：用户和员工删除，50：管理员和员工删除，60：管理员和用户删除，70：管理员和用户和员工删除
    await axios.post(BASE_URL+'/v1/order/save',{id:row.id,showStatus:row.showStatus})
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("删除成功")
            loadOrder()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const handleClose = ()=>{
  if (confirm("确认要关闭吗")){
    dialogVisible.value = false;
  }
}






</script>


<style scoped>

</style>